<template>
  <div>
    <!-- 文章标题 -->
    <div class="block">文章标题</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
    </div>

    <!-- 文章编辑 -->
    <div class="block">文章编辑</div>
    <Editor
      :options="editorOptions"
      :initialValue="form.editorText"
      height="800px"
      ref="toastuiEditor"
    />

    <!-- 文章描述 -->
    <div class="block">文章描述</div>
    <el-input type="textarea" :rows="6" v-model="form.description"></el-input>

    <!-- 文章头图 -->
    <UpLoad uploadTitle="文章头图" v-model="form.thumb" />

    <!-- 文章分类 -->
    <div class="block">文章分类</div>
    <el-select
      v-model="form.select"
      placeholder="选择分类"
      @change="changeHandle"
    >
      <el-option
        v-for="item in blogType"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>

    <div>
      <!-- 发布按钮 -->
      <el-button
        type="primary"
        style="margin-top: 15px"
        @click="ArticleHandle"
        >{{ btnContent }}</el-button
      >
    </div>
  </div>
</template>
  
  <script>
import "@toast-ui/editor/dist/toastui-editor.css";
import "@toast-ui/editor/dist/i18n/zh-cn";
import { Editor } from "@toast-ui/vue-editor";
import UpLoad from "@/components/UpLoad";
import { getBlogType } from "@/api/blogType.js";
import { addBlog, editBlog, findOneBlog } from "@/api/blog.js";
export default {
  components: {
    Editor,
    UpLoad,
  },
  props: ["mode"],
  data() {
    return {
      form: {
        title: "",
        editorText: "", //用户编辑内容
        description: "",
        thumb: "",
        select: "",
      },
      blogType: [], //存放博客分类
      imageUrl: "",
      editorOptions: {
        language: "zh-CN",
      },
      btnContent: "发布文章",
    };
  },
  created() {
    getBlogType().then((res) => {
      this.blogType = res.data;
    });
    if (this.mode === "edit") {
      this.id = this.$route.params.id;
      findOneBlog(this.id).then((res) => {
        //回填
        this.form = res.data;
        this.form.select =
          res.data.category === null ? "" : res.data.category.id;
        this.$refs.toastuiEditor.invoke("setHTML", res.data.htmlContent);
      });
      this.btnContent = "确认修改";
    }
  },
  methods: {
    ArticleHandle() {
      let html = this.$refs.toastuiEditor.invoke("getHTML");
      let markdown = this.$refs.toastuiEditor.invoke("getMarkdown");

      let obj = {
        title: this.form.title,
        description: this.form.description,
        createDate: new Date().getTime(),
        categoryId: this.form.select,
        toc: [],
        htmlContent: html,
        thumb: this.form.thumb,
        markdownContent: markdown,
      };

      if (obj.title && obj.description && obj.htmlContent && obj.categoryId) {
        if (this.mode === "add") {
          addBlog(obj).then(() => {
            this.$router.push("/blogList");
            this.$message.success("添加文章成功");
          });
        } else {
          editBlog({ id: this.form.id, data: obj }).then(() => {
            this.$router.push("/blogList");
            this.$message.success("修改文章成功");
          });
        }
      } else {
        this.$message.error("请填写所有内容");
      }
    },
    changeHandle() {
      this.$forceUpdate();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.block {
  margin: 15px 0;
  font-weight: 100;
}
</style>